<script lang="ts" setup>
import { Plus, Transform, CloseOne } from '@icon-park/vue-next'
import { UploadRequestOptions, ElMessage } from 'element-plus'
import { ref } from 'vue'
const files = ref<string[]>([])
const httpRequest = (options: UploadRequestOptions) => {
  const file = options.file.name.split('/').pop()!
  if (files.value.includes(file)) {
    ElMessage.error(`文件${file}已存在`)
  } else {
    files.value.push(file)
  }
}
const remove = (index: number) => {
  files.value.splice(index, 1)
}
</script>

<template>
  <div class="px-3">
    <section class="video-actions">
      <el-upload
        ref="upload"
        action="#"
        drag
        multiple
        :http-request="httpRequest"
        :show-file-list="false"
      >
        <plus theme="outline" size="48" />
      </el-upload>
      <div class="action-button">
        <transform class="transform-button" theme="outline" size="48" />
      </div>
    </section>
    <section class="h-96 mt-5 border-dashed border border-gray-200 p-1">
      <div v-if="files.length" class="video-list">
        <div
          v-for="(file, index) of files"
          :key="index"
          class="group text-xs flex items-center justify-between rounded-sm mt-2 bg-slate-500 text-gray-300 p-2 cursor-pointer"
        >
          {{ file }}
          <close-one
            class="cursor-pointer text-gray-400 opacity-60 group-hover:opacity-100 group-hover:text-gray-100"
            theme="outline"
            size="16"
            @click="remove(index)"
          />
        </div>
      </div>
      <div v-else class="flex items-center justify-center h-full">
        <div class="text-center text-green-200 text-xs">转换完成</div>
      </div>
    </section>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-upload-dragger) {
  @apply w-20 h-20 flex items-center justify-center;
}
.video-actions {
  @apply flex items-center justify-around;
  .action-button {
    @apply flex items-center justify-center border border-dashed cursor-pointer bg-white  h-20 w-20 rounded-md shadow-md text-center;
  }
}
.video-list {
  @apply h-full overflow-y-auto;
}
// 转换按钮旋转
.transform-button {
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
